<template>
    <div>
        <div>
            <router-link to="/"><div class="back"><van-icon name="arrow-left" class="you" /></div></router-link>
        </div>
        <div class="pic"><img :src="info.poster" alt="" width="100%" class="poster"></div>
        <div>
            <div>{{ info.name}}</div>
            <div>{{ info.grade }}</div>
            <div>{{ info.category }}</div>
            <div>{{ info.premiereAt | parsePremiereAt}}上映</div>
            <div>{{ info.nation }} | {{ info.runtime }}分</div>
            <div>{{ info.synopsis }}</div>
        </div>
        <div>
            <p>演职人员</p>
            <Actors :key="info.actors.length">
                <div class="swiper-slide" v-for="actor in info.actors" :key="actor.name">
                    <img :src="actor.avatarAddress" width="85" />
                    <div>{{ actor.name }}</div>
                </div>             
            </Actors>
        </div>
        <div>
            <p>剧照</p>
            <Actors :key="info.photos.length">
                <div class="swiper-slide width" v-for="actor in info.photos" :key="actor.name" >
                    <img :src="actor" width="150" height="100" />
                </div>             
            </Actors>
        </div>
    </div>
</template>

<script>
import uri from "@/config/uri"
import Vue from 'vue';
import { Icon } from 'vant';
import Actors from "@/views/Films/Actors"
import moment from "moment";

Vue.use(Icon);

export default {
    data(){
        return {
            info:{actors: [],photos:[]},

        }
    },
    components:{
        Actors,
    },

    created(){
        let filmId = this.$route.params.id;
        // console.log(filmId);
        this.$http.get(uri.getFilmInfo+"?filmId=" + filmId)
        .then(ret=>{
            this.info = ret.data.film
            console.log(this.info);
        })
        // 在这里通知vuex设置isShow为false
        this.$store.commit("setIsShow", false);
    },
    mounted(){
        this.Active = true
    },
    beforeDestroy(){
        this.$store.commit("setIsShow", true);
       },
    filters:{
        parsePremiereAt(timestamps) {
            return moment(timestamps * 1000).format("YYYY-MM-DD");
        },
    }
}
</script>

<style lang="scss" scoped>
.back{
    z-index: 999999999999;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 25px;
    opacity: 0.8;
    width: 30px;
    height: 30px;
    background: #666;
    border-radius: 50%;
    .you{
        position: relative;
        top: 3px;
        left: 1px;
    }
   
}


.pic{
    height: 56vw;
    position: relative;
    overflow: hidden;
    img{
       position: absolute;
       top: -80%;
    }
}
.width{
    width: 150px!important;
}

</style>